<template>
  <div class="order">
    <van-sticky>
      <nav-bar
        class="nav-bar"
        is-back
        style="background: var(--theme-color); color: white"
      >
        <i slot="left" class="iconfont icon-fanhui"> </i>
        <span slot="center">订单列表</span>
        <i slot="right" class="iconfont icon-gengduo"></i>
      </nav-bar>
    </van-sticky>
    <van-tabs
      v-model="active"
      sticky
      offset-top="44"
      animated
      color="var(--theme-color)"
      @change="handleChange"
    >
      <van-tab
        :title="tab.title"
        :name="tab.id"
        v-for="tab in tabs"
        :key="tab.title"
      >
        <div v-if="orders.length > 0">
          <div v-for="item in orders" :key="item.id" class="order-item">
            <div v-for="orderDesc in item.orderDesc" :key="orderDesc.oid">
              <div class="orderDesc" @click="linkOrderDetail(item.id)">
                <img class="image" :src="orderDesc.show" />
                <span class="title">{{ orderDesc.title }}</span>
                <div style="width: 50px; text-align: center">
                  <span>{{ orderDesc.price | priceFilter }}</span>
                  <div>x{{ orderDesc.num }}</div>
                </div>
              </div>
              <div class="price" style="">
                <span>商品金额</span>
                <span>
                  {{ (orderDesc.price * orderDesc.num) | priceFilter }}</span
                >
              </div>
              <div style="text-align: right; padding: 15px" v-if="active === 0">
                <van-button
                  color="#a1a4aa"
                  plain
                  size="mini"
                  style="margin-right: 10px"
                  @click="cancel(item.id)"
                  >取消</van-button
                >
                <van-button color="red" size="mini" @click="pay(item.id)"
                  >去支付</van-button
                >
              </div>
              <div
                style="text-align: right; padding: 15px"
                v-else-if="active === 1"
              >
                <van-button color="red" size="mini" @click="del(item.id)"
                  >删除</van-button
                >
              </div>
              <div style="text-align: right; padding: 15px" v-else>
                <van-button color="red" size="mini" @click="del(item.id)"
                  >删除</van-button
                >
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="当前状态没有订单,快去下单吧"></van-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryOrder, pay, cancel, del } from '../../api'
import NavBar from '../../components/nav-bar/nav-bar'
import { toast } from '../../utils'

export default {
  data: () => ({
    active: 0,
    orders: [],
    tabs: [
      { id: 0, title: '代付款' },
      { id: 1, title: '已完成' },
      { id: 2, title: '取消' }
    ]
  }),
  components: { NavBar },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted() {
    const { active } = this.$route.params
    if (active == 0) {
      this.active = 0
    }
    if (active == 1) {
      this.active = 1
    }
    if (active == 2) {
      this.active = 2
    }
    this.handleChange(0)
  },
  methods: {
    //处理tabs切换并查询订单数据
    async handleChange() {
      const { data } = await queryOrder({
        uid: this.userInfo.id,
        status: this.active
      })
      this.orders = data
    },
    //支付
    async pay(id) {
      console.log(id)
      const { data } = await pay({ id })
      toast.success(data)
      this.active = 1
      this.handleChange(this.active)
    },
    //取消订单
    async cancel(id) {
      const { data } = await cancel({ id })
      toast.success(data)
      this.active = 2
      this.handleChange(this.active)
    },
    //删除订单
    async del(id) {
      const { data } = await del({ id })
      toast.success(data)
      this.handleChange(this.active)
    },
    linkOrderDetail(id) {
      this.$router.push('/order-detail/' + id)
    }
  },
  filters: {
    priceFilter(price) {
      return '￥' + price.toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
  background: #f7f7f7;

  position: relative;
  z-index: 1;
}
.order-item {
  margin: 20px 15px;
  background: white;
  border-radius: 10px;
}
.orderDesc {
  padding: 15px;
  display: flex;
  align-items: center;
  height: 90px;
  font-size: 12px;
  .image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
  }
  .title {
    flex: 1;
    color: #090c19;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 30px;
    padding: 0 15px;
  }
}
.price {
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 15px;
  font-weight: 700;
}
</style>
